<template>
<li class="activity">
  <el-avatar :size="size" class="avatar"> {{userName | nameFilter}} </el-avatar>
  <div class="activity-body-coyness">
    <span class="activity-title">{{userName || '未设置名称'}}</span>
    <div class="time-stamp">{{item.createTime | dateFilter }}</div>
    <div class="activity-content">
      <span>{{item.content}}</span>
      <slot></slot>
    </div>
  </div>
</li>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { isChinese } from '@/utils/validate'
import { formatShortTime } from '@/afterSales/utils/common';
import { timeFormat } from '@/utils/common'
@Component({
  name: 'avatar',
  components: {
  },
  filters: {
    nameFilter: (type: any) => {
      if (isChinese(type)) {
        return type.substring(type.length - 2)
      } else {
        return type.substring(0, 2)
      }
    },
    dateFilter: (value: any) => {
      return timeFormat(value, '');
    }
  }
})
export default class extends Vue {
  @Prop({ default: {} }) public item!: any
  @Prop({ default: {} }) public userObj!: any
  @Prop({ default: 32 }) public size!: number

  private get userName () {
    if (this.userObj[this.item.createUser].agentName) {
      return `${this.userObj[this.item.createUser].agentName || ''}【${this.userObj[this.item.createUser].agentNumber}】`
    }
    return ''
  }
}
</script>

<style lang="stylus" scoped>
.avatar
  font-size 12px
  color white
.activity {
  line-height 20px
  list-style none
  display: flex;
  .time-stamp {
    color: #767E91;
    line-height: 18px
  }
  .activity-body-coyness {
    font-size 12px
    margin 0 0 0 20px
    color #8c8c8c
    font-weight 400
    word-wrap break-word
    word-break normal
    flex: 1;
    .activity-title {
      color #303753
      font-weight 400
      line-height: 18px;
    }
    .activity-content {
      line-height 18px
      color #303753
      margin-top 8px
      font-weight normal
    }
  }
  .activity-body-coyness>:last-child {
    margin-bottom 0px
  }
}
</style>
